<template>
    <div class="addressList">
        <div class="content" v-if="addressList.length">
            <div class="address" v-for="(i,idx) in addressList" :key="idx">
                <div class="address-message">
                    <p class="address-message-city">{{i.remark}}</p>
                    <p class="address-message-nameAndPhone">
                        <span class="nameAndPhone-name">{{ i.name }}</span>
                        <span class="nameAndPhone-phone">{{ i.link }}</span>
                        
                        <span class="nameAndPhone-default" v-if="i.isdef == 1">默认</span>
                    </p>
                </div>
                <div class="address-edit" >
                    <Del size="16"  @click.stop="DeletePopUp(i)"></Del>
                    <Edit size="16" @click.stop="GoEditAddress(i)"></Edit>
                </div>
                <div class="address-confirm-frame" v-if="i.checkFlag">
                    <div class="confirm-box">
                        <Checklist size="16" class="confirm-icon"></Checklist>
                    </div>
                </div>
            </div>
        </div>
        <nut-empty description="无数据" v-else></nut-empty>
        <div class="address-confirm">
            <div class="address-confirm-content">
                <nut-button type="info" shape="square" class="confirm-opera" @click="GoNewAddress()">新建</nut-button>
                <!-- <nut-button type="info" shape="square" class="confirm-opera" @click="ConfirmTarAddress()">确认</nut-button> -->
            </div>
        </div>
        <nut-dialog 
            title="温馨提示" 
            content="确定要删除吗？" 
            v-model:visible="deletVisible" 
            custom-class="deleteDialog"
            @cancel="CancelDialog" 
            @ok="DeleteAddress" />
    </div>
  </template>
  
  <script>
    import { reactive, toRefs,isReactive, onBeforeMount, onMounted, onBeforeUnmount } from 'vue';
    import './index.scss';
    import { GetAddressList, DelAddress } from '../utils/api.js';
    import { Del, Edit, Checklist } from '@nutui/icons-vue-taro';
    import Taro from '@tarojs/taro'
    import currency from 'currency.js'
    import { eventCenter, getCurrentInstance } from '@tarojs/taro'
    export default {
        name: 'Index',
        components: {
            Del,Edit,Checklist
        },
        setup(){
            const state = reactive({
                addressList: [],
                deletVisible: false,
                tarValId: '',
             
            });
            const GetAddress = async () => {
                let addressRes = await GetAddressList({});
                if(addressRes.code == 200) {
                    state.addressList = addressRes.data.list
                }
            }
            onBeforeMount(() => {
                const onShowEventId = Taro.getCurrentInstance().router.onShow
                // 监听
                eventCenter.on(onShowEventId, onShow)
            })
            onMounted(() => {
               
            })
            onBeforeUnmount(() => {
                const onShowEventId = Taro.getCurrentInstance().router.onShow
                // 卸载
                eventCenter.off(onShowEventId, onShow)
            })
            const onShow = () => {
                GetAddress()
            }
            const GoEditAddress = (tarVal) => {
                Taro.navigateTo({
                    url: `/pages/address-edit/index?type=${2}&editData=${JSON.stringify(tarVal)}`
                })
            };
            // 删除前的安全提示
            const DeletePopUp = (tarVal) => {
                state.tarValId = tarVal.id;
                state.deletVisible = true;
            }
            const CancelDialog = () => {
                state.deletVisible = false;
            }
            const DeleteAddress = async () => {
                let delRes = await DelAddress({
                    id: state.tarValId
                });
                if(delRes.code == 200) {
                    GetAddress()
                }
            }
            const GoNewAddress = () => {
                Taro.navigateTo({
                    url: `/pages/address-edit/index?type=${1}`
                })
            };
            const ConfirmTarAddress = () => {
                Taro.navigateBack()
            }
        
            return {
                DeletePopUp,
                CancelDialog,
                DeleteAddress,
                GoEditAddress,
                GoNewAddress,
                ConfirmTarAddress,
                ...toRefs(state),
            }
        }
    }
  </script>
  
  